<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram - Spring Mass System</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  canvas {
    border: 1px solid #ccc;
  }
</style>
</head>
<body>

<canvas id="physicsCanvas" width="400" height="400"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// --- Style and Configuration ---
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';

// --- Parameters ---
const ceilingLineY = 80;
const ceilingX1 = 50;
const ceilingX2 = 350;

const squareSize = 150;
const springLength = 70;
const springTurns = 3;
const springWidth = 10;

const squareY = ceilingLineY + springLength;
const squareX = (canvas.width - squareSize) / 2; // Center the square

const textY = squareY + squareSize + 60;
const textX = canvas.width / 2;

// --- Helper Function to Draw Spring ---
// This function draws a crenellated spring, which approximates the style in the source image.
// x, y1, y2: The central axis coordinates of the spring.
// turns: The number of coils/segments.
// width: The amplitude of the coil from the central axis.
// direction: -1 for coils pointing left, 1 for coils pointing right.
function drawSpring(x, y1, y2, turns, width, direction) {
    ctx.beginPath();
    ctx.moveTo(x, y1);
    const totalLength = y2 - y1;
    const segmentLength = totalLength / turns;

    for (let i = 0; i < turns; i++) {
        const yTop = y1 + i * segmentLength;
        const yBot = y1 + (i + 1) * segmentLength;
        
        ctx.lineTo(x, yTop); // Connect to the start of the current segment
        ctx.lineTo(x + width * direction, yTop); // Top horizontal bar of the 'coil'
        ctx.lineTo(x + width * direction, yBot); // Vertical side of the 'coil'
        ctx.lineTo(x, yBot); // Bottom horizontal bar of the 'coil'
    }
    ctx.stroke();
}

// --- Main Drawing ---

// 1. Draw the ceiling/fixed support
ctx.beginPath();
ctx.moveTo(ceilingX1, ceilingLineY);
ctx.lineTo(ceilingX2, ceilingLineY);
ctx.stroke();

// Draw hatching for the ceiling. The slashes indicate a fixed, solid material.
const hatchSpacing = 15;
const hatch_dx = 12;
const hatch_dy = 12;
for (let x = ceilingX1 + hatch_dx; x <= ceilingX2; x += hatchSpacing) {
    ctx.beginPath();
    ctx.moveTo(x - hatch_dx, ceilingLineY - hatch_dy);
    ctx.lineTo(x, ceilingLineY);
    ctx.stroke();
}

// 2. Define spring attachment points
const springAttachY_top = ceilingLineY;
const springAttachY_bottom = squareY;
const springAttachX_left = squareX;
const springAttachX_right = squareX + squareSize;

// 3. Draw the two springs
// Left Spring (coils point left, so direction is -1)
drawSpring(springAttachX_left, springAttachY_top, springAttachY_bottom, springTurns, springWidth, -1);

// Right Spring (coils point right, so direction is 1)
drawSpring(springAttachX_right, springAttachY_top, springAttachY_bottom, springTurns, springWidth, 1);

// 4. Draw the square metal plate
ctx.beginPath();
ctx.rect(squareX, squareY, squareSize, squareSize);
ctx.stroke();

// 5. Draw the figure label
ctx.font = "bold 24px serif";
ctx.textAlign = "center";
ctx.fillText("Fig. 2.58.", textX, textY);

</script>

</body>
</html>